<template>
  <CommonLayout
    :current-module="moduleConfig.name"
    :menu-items="moduleConfig.menuItems"
    :page-title="layoutState.pageTitle"
    :breadcrumb="layoutState.breadcrumb"
    :show-filter-bar="layoutState.showFilterBar"
    :show-side-panel="layoutState.showSidePanel"
    :side-panel-title="layoutState.sidePanelTitle"
    :show-bottom-actions="layoutState.showBottomActions"
    :show-pagination="layoutState.showPagination"
    :show-modal="layoutState.showModal"
    @page-change="handlePageChange"
    @logout="handleLogout"
    @modal-close="handleModalClose"
    ref="layoutRef"
  >
    <!-- 页面操作按钮 -->
    <template #page-actions>
      <button class="btn btn-secondary" @click="handleBackToHome">
        <span>🏠</span> 返回首页
      </button>
      <button class="btn btn-primary" @click="testMessage">
        <span>✉️</span> 发送邮件
      </button>
      <button class="btn btn-success" @click="refreshData">
        <span>🔄</span> 刷新
      </button>
    </template>

    <!-- 其他模板内容与之前的Home.vue相同 -->
    <template #filter-bar v-if="layoutState.showFilterBar">
      <!-- 筛选栏内容 -->
    </template>

    <template #main-content>
      <div class="email-module-content">
        <h3>{{ pageContentTitle }}</h3>
        <p>这是邮件管理模块的 {{ layoutState.pageTitle }} 页面</p>
        <!-- 这里可以放置具体的邮件管理功能组件 -->
      </div>
    </template>

    <!-- 其他插槽内容... -->
  </CommonLayout>
</template>

<script setup>
import { reactive, ref, computed } from "vue";
import CommonLayout from "../CommonLayout.vue";

// Props
const props = defineProps({
  moduleConfig: {
    type: Object,
    required: true,
  },
});

// Emits
const emit = defineEmits(["back-to-home"]);

// Refs
const layoutRef = ref(null);

// 布局状态
const layoutState = reactive({
  currentPage: "send",
  pageTitle: "发送邮件",
  breadcrumb: "邮件管理 > 发送邮件",
  showFilterBar: false,
  showSidePanel: true,
  sidePanelTitle: "收件人选择",
  showBottomActions: true,
  showPagination: false,
  showModal: false,
});

// 计算属性
const pageContentTitle = computed(() => {
  const titleMap = {
    send: "邮件编辑",
    inbox: "收件箱列表",
    outbox: "发件箱列表",
    template: "模板管理",
    stats: "统计报表",
  };
  return titleMap[layoutState.currentPage] || "邮件管理";
});

// 方法
const handlePageChange = (page) => {
  layoutState.currentPage = page.key;
  layoutState.pageTitle = page.title;
  layoutState.breadcrumb = `${props.moduleConfig.name} > ${page.title}`;

  // 根据页面设置界面状态
  switch (page.key) {
    case "send":
      layoutState.showFilterBar = false;
      layoutState.showSidePanel = true;
      layoutState.sidePanelTitle = "收件人选择";
      layoutState.showBottomActions = true;
      layoutState.showPagination = false;
      break;
    case "inbox":
    case "outbox":
      layoutState.showFilterBar = true;
      layoutState.showSidePanel = false;
      layoutState.showBottomActions = false;
      layoutState.showPagination = true;
      break;
    // ... 其他页面配置
  }

  layoutRef.value?.updateStatus("已切换", `当前页面：${page.title}`);
};

const handleBackToHome = () => {
  emit("back-to-home");
};

const handleLogout = () => {
  if (confirm("确定要退出系统吗？")) {
    emit("back-to-home");
  }
};

const testMessage = () => {
  layoutRef.value?.showMessage("这是邮件管理模块的测试消息！", "success");
};

const refreshData = () => {
  layoutRef.value?.updateStatus("刷新中...", "");
  setTimeout(() => {
    layoutRef.value?.updateStatus("就绪", "数据已刷新");
    layoutRef.value?.showMessage("邮件数据刷新完成！", "info");
  }, 1000);
};

const handleModalClose = () => {
  layoutState.showModal = false;
};
</script>

<style scoped>
.email-module-content {
  padding: 20px;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.btn-primary {
  background: #3498db;
  color: white;
}

.btn-secondary {
  background: #95a5a6;
  color: white;
}

.btn-success {
  background: #27ae60;
  color: white;
}
</style>
